<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<!-- 引入 element-ui 样式文件，需要网络，否则失效 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入 vue 文件，使用本地下载的-->
		<script type="text/javascript" src="js/vue.min.js"></script>
		<!-- 引入 axios 库文件，使用本地下载的-->
		<script type="text/javascript" src="js/axios.min.js"></script>
		<!-- 引入组件库文件，需要网络，否则失效 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			.input {
				width: 250px;
			}
			.one {
				border: 0px solid gray;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app" class="one">
			<h2>登录页面</h2>
			<!-- 使用了 Form 表单组件 -->
			<el-form label-width="80px">
				<el-form-item>
					用户名：<el-input v-model="user.uUsername" class="input" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item>
					密码：<el-input v-model="user.uPassword" class="input" placeholder="请输入密码" type="password"></el-input>
				</el-form-item>
				<el-button type="warning" @click="loginExit">取消登录</el-button>
				<el-button type="primary" @click="userLogin">登录按钮</el-button>
			</el-form>
		</div>

		<!-- 引入外部 js 文件 -->
		<script src="js/common.js"></script>

		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					user: {
						uUsername: '',
						uPassword: '',
					}
				},
				methods: {
					userLogin() {
						// 判断值不能为空
						if (this.user.uUsername.length <= 0 || this.user.uPassword.length <= 0) {
							return alert('账号或密码不能为空！')
						}
						// 返回新的对象
						const login = new URLSearchParams()
						login.append('uUsername', this.user.uUsername)
						login.append('uPassword', this.user.uPassword)
						// 开始发送请求
						axios({
							method: 'post',
							url: '/user/addLogin',
							// 说明：如果使用了 this.user.username，那么在 data 中就不用声明了
							data: login
						}).then(r => {
							if (r.data.code != 200) {
								localStorage.setItem('user', JSON.stringify(r.data.data))
								alert('恭喜你，登录成功')
								// window.location = 'medicine.html';
								window.location = "hello.html";
							} else {
								this.$message.error('账户或密码错误，请重新输入！')
							}
						})
					},
					// 取消登录按钮方法
					loginExit() {
						// 取消信息提示
						this.$message.warning('已取消登录')
						// 清空集合数据
						this.user = {}
					}
				}
			})
		</script>
	</body>
</html>
